import { Button, Flex, Modal } from "antd";

import { UserAccountDataType } from "@/types/user";

type BindModalProps = {
  data: UserAccountDataType;
  open: boolean;
  onCancel: () => void;
  onOk: () => void;
  loading?: boolean;
};

export default function BindModal({ data, open, onCancel, onOk, loading }: BindModalProps) {
  if (!data) return null;

  return (
    <>
      <Modal open={open} centered footer={false} closable={false}>
        <Flex vertical gap={20} className="pt-4">
          <h1 className="text-base font-bold text-center">
            <span className="w-4/5">是否解除此用户的【{data.nickname}】的帐号绑定？</span>
          </h1>
          <Flex gap={32} justify="center">
            <Button type="primary" ghost onClick={onCancel} disabled={loading}>
              取消
            </Button>
            <Button type="primary" onClick={onOk} loading={loading}>
              确定
            </Button>
          </Flex>
        </Flex>
      </Modal>
    </>
  );
}
